<template>
	<view>
		<view class="container">
			<view class="card my-3 p-4">
				<view class="title my-2">
					选择地址
				</view>
				<view class="form-box">
					<view class="form-item">
						<view class="label">
							寄件地区
						</view>
						<view class="value">
							<uni-data-picker :localdata="items" :border="false"
								:placeholder="shippingInfo.area || '请选择省市区'" @change="sendionchange"></uni-data-picker>
							<uni-icons type="right" size="20"></uni-icons>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							收件地区
						</view>
						<view class="value">
							<uni-data-picker :localdata="items" :border="false"
								:placeholder="receivingInfo.area || '请选择省市区'" @change="regionchange"></uni-data-picker>
							<uni-icons type="right" size="20"></uni-icons>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							重量(KG)
						</view>
						<uni-number-box v-model="packageInfo.weight" />
					</view>
					<view class="form-item">
						<view class="label">
							尺寸(cm)
						</view>
						<view class="ss-flex size">
							<view class="input-box">
								<input v-model.number="packageInfo.vloumLong" type="number" placeholder="长">
							</view>
							<view class="input-box">
								<input v-model.number="packageInfo.vloumWidth" type="number" placeholder="宽">
							</view>
							<view class="input-box">
								<input v-model.number="packageInfo.vloumHeight" type="number" placeholder="高">
							</view>
						</view>
					</view>
				</view>
				<view class="red">
					注意：最终快递计费计算会比较实际重量与体积重量，取较大的数字计算为寄件费用，请知晓！
				</view>
			</view>
			<view class="buttons">
				<button class="button" @tap="getKuaiList">
					查询
				</button>
				<button class="button" @tap.stop="goto" :data-url="'/kuaidi/index'">
					去下单
				</button>
			</view>
			<view v-if="list.length>0" class="card my-3 p-4">
				<view class="title mb-4 py-2">
					对比品牌
				</view>
				<view class="list">
					<view v-for="item in list" :key="item.channelId" class="item">
						<view class="brand">
							<image class="logo" :src="item.channelLogoUrl"></image>
							<text class="name">{{ item.tagType }}</text>
						</view>
						<view class="price">
							¥ <text class="num">{{ item.totalFreight }}</text>
						</view>
						<view class="tag">
							限时优惠
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	var app = getApp();
	export default {
		data() {
			return {
				items: [],
				shippingInfo: {
					area: ''
				},
				receivingInfo: {
					area: ''
				},
				packageInfo: {
					weight: '1',
					vloumLong: '1',
					vloumWidth: '1',
					vloumHeight: '1',
					billRemark: ''
				},
				list: []
			};
		},
		onLoad: function(opt) {
			var that = this;
			app.get('ApiIndex/getCustom', {}, function(customs) {
				var url = app.globalData.pre_url + '/static/area.json';
				if (customs.data.includes('plug_zhiming')) {
					url = app.globalData.pre_url + '/static/area_gaoxin.json';
				}
				uni.request({
					url: url,
					data: {},
					method: 'GET',
					header: {
						'content-type': 'application/json'
					},
					success: function(res2) {
						that.items = res2.data
					}
				});
			});
		},
		methods: {
			sendionchange(e) {
				const value = e.detail.value
				this.shippingInfo = {
					area: value[0].text + ',' + value[1].text + ',' + value[2].text,
					province: value[0].text,
					city: value[1].text,
					district: value[2].text,
					address: '',
					tel: '',
					name: '',
				}
			},
			regionchange(e) {
				const value = e.detail.value
				this.receivingInfo = {
					area: value[0].text + ',' + value[1].text + ',' + value[2].text,
					province: value[0].text,
					city: value[1].text,
					district: value[2].text,
					address: '',
					tel: '',
					name: '',
				}
			},
			setPapmer() {
				let that = this;
				let pamper = {
					sender: that.shippingInfo.name,
					senderMobile: that.shippingInfo.tel,
					senderCity: that.shippingInfo.city,
					senderCounty: that.shippingInfo.district,
					senderProvince: that.shippingInfo.province,
					senderLocation: that.shippingInfo.address,
					senderAddress: that.shippingInfo.area.replaceAll(',', '') + that.shippingInfo.address,
					receiver: that.receivingInfo.name,
					receiverMobile: that.receivingInfo.tel,
					receiveCity: that.receivingInfo.city,
					receiveCounty: that.receivingInfo.district,
					receiveProvince: that.receivingInfo.province,
					receiveLocation: that.receivingInfo.address,
					receiveAddress: that.receivingInfo.area.replaceAll(',', '') + that.receivingInfo.address,
					...that.packageInfo
				}
				return pamper;
			},
			getKuaiList() {
				let that = this;
				that.loading = true;
				app.showLoading('优惠询价中')
				app.post('ApiKuaidi/selectKuaidi', that.setPapmer(), function(res) {
					app.showLoading(false);
					that.loading = false;
					if (res.code == '1') {
						that.list = res.result;
					}
					that.loaded();
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		width: 95%;
		margin: 0 auto;
		padding-bottom: 240rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: 600;
	}

	.form-box {
		display: flex;
		flex-direction: column;
		column-gap: 30rpx;

		.form-item {
			height: 100rpx;
			line-height: 100rpx;
			color: #999999;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.value {
				display: flex;
				align-items: center;
			}

			.size {
				display: flex;
				column-gap: 12rpx;

				.input-box {
					width: 140rpx;
					height: 74rpx;
					display: flex;
					align-items: center;
					text-align: center;
					border-radius: 12rpx;
					border: 2rpx solid #eee;
					color: #000;
				}
			}
		}
	}

	.red {
		font-size: 24rpx;
		margin-top: 10rpx;
		color: red;
	}

	.buttons {
		display: flex;
		justify-content: space-around;
		margin: 34rpx 0 60rpx;

		.button {
			width: 286rpx;
			height: 90rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			border-radius: 100rpx;

			&:first-child {
				border: 2rpx solid #0396ff;
				background-color: #fff;
				color: #0396ff;
			}

			&:last-child {
				background-color: #0396ff;
				color: #fff;
			}
		}
	}

	.list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20rpx;

		.item {
			height: 280rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			row-gap: 12rpx;
			background-color: #f5f8ff;
			border-radius: 20rpx;

			.brand {
				display: flex;
				align-items: center;
				column-gap: 10rpx;

				.logo {
					width: 40rpx;
					height: 40rpx;
					border-radius: 10rpx;
				}

				.name {
					font-size: 32rpx;
					color: #000;
				}
			}

			.price {
				color: red;

				.num {
					font-size: 40rpx;
					font-weight: 600;
				}
			}

			.tag {
				padding: 4rpx 8rpx;
				color: #ff6600;
				border: 2rpx solid #ff6600;
				border-radius: 30rpx;
			}
		}
	}

	.card {
		border-radius: 20rpx;
		background-color: #fff;
	}

	.p-4 {
		padding: 30rpx !important;
	}

	.my-3 {
		margin-top: 20rpx !important;
		margin-bottom: 20rpx !important;
	}

	.py-2 {
		padding-top: 10rpx !important;
		padding-bottom: 10rpx !important;
	}

	.mb-4 {
		margin-bottom: 30rpx !important;
	}
</style>